<template>
  <div class="grid sm:grid-cols-3 gap-4">
    <div
      :class="
        cn('flex gap-2 border rounded-md p-2 cursor-pointer', {
          'outline-3 outline-offset-2 outline-dashed outline-primary':
            mode == theme,
        })
      "
      v-for="theme of themes"
      :key="theme"
      :data-theme="theme"
      @click="mode = theme as any"
    >
      <div class="w-4 h-full">
        <div class="h-1/2 w-full bg-base-200 rounded-t-md"></div>
        <div class="h-1/2 w-full bg-base-300 rounded-b-md"></div>
      </div>
      <div>
        <h4 class="text-lg font-black">{{ theme }}</h4>
        <div class="flex gap-2">
          <div class="size-8 bg-primary rounded-md grid place-items-center">
            <div class="text-primary-content text-sm font-bold">A</div>
          </div>
          <div class="size-8 bg-secondary rounded-md grid place-items-center">
            <div class="text-secondary-content text-sm font-bold">A</div>
          </div>
          <div class="size-8 bg-accent rounded-md grid place-items-center">
            <div class="text-accent-content text-sm font-bold">A</div>
          </div>
          <div class="size-8 bg-neutral rounded-md grid place-items-center">
            <div class="text-neutral-content text-sm font-bold">A</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useColorMode } from "@vueuse/core";
import { cn } from "@/components/utils";

const themes = [
  "light",
  "dark",
  "cupcake",
  "bumblebee",
  "emerald",
  "corporate",
  "synthwave",
  "retro",
  "cyberpunk",
  "valentine",
  "halloween",
  "garden",
  "forest",
  "aqua",
  "lofi",
  "pastel",
  "fantasy",
  "wireframe",
  "black",
  "luxury",
  "dracula",
  "cmyk",
  "autumn",
  "business",
  "acid",
  "lemonade",
  "night",
  "coffee",
  "winter",
];

const mode = useColorMode({
  attribute: "data-theme",
  initialValue: "light",
  modes: Object.fromEntries(themes.map((theme) => [theme, theme])), // convert array to ob
});
</script>
